<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端</title>
<style lang="less">
 html, body {
  height: 100%;
  margin: 0;
}
 body {
  background-image: url('static/img/挪威.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px; /* 高度设置为40px */
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

.title {
  color: white;
  font-size: 1.5em;
  margin-left: 15px; /* 左边距 */
}

.navList {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.navList a {
  color: white;
  text-decoration: none;
  font-size: 1em;
  margin: 0 15px; /* 左右15px间隙 */
  padding-left: 10px;
  padding-right:10px;
  border-left: 1px solid white; /* 左边框 */
  border-right: 1px solid white; /* 右边框 */
  transition: transform 0.3s ease; /* 过渡效果 */
}

/* 选择navList中的第一个a标签，去除左border */
.navList a:first-child {
  border-left: 0px;
}

/* 选择navList中的最后一个a标签，去除右border */
.navList a:last-child {
  border-right: 0px;
}

.navList a:hover {
  transform: translateY(-10px); /* 鼠标悬停时向上移动10px */
}


.topbar{
    margin-top: 50px;
    h2{

    }
}


.content{
    margin-top: 50px;
    width: auto;
    height:auto;
    .row{
        padding-top: 50px;
        padding-left:30px ;
         display: flex;
          justify-content: space-between;
          width: 100%;
        .icon{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;

        }
    }

    
    .vue{
        background-color: #f38181;
        .icon{
            background-color: #42b983;
        }

    }
    .react{
        background-color: #fce38a;
        .icon{
            background: linear-gradient(315deg, #42d392 25%, #647eff);
        }
    }
    .angular{
        background-color: #eaffd0;
        .icon{
            background-color: #90f;
        }
    }
      .pinia{
        background-color: #95e1d3;
          .icon{
              background: linear-gradient(315deg, #51a256 25%, #f7d336);
          }
    }
      .vite{
        background-color: #a8d8ea;
          .icon{
              background: linear-gradient(120deg, #86b91a 30%, #edd532);
          }
    }
      .workpress{
        background-color: #fcdab3;
          .icon{
              background: linear-gradient(120deg, #bd44fe 35%, #42d1ff);
          }
    }

.vue, .react, .angular, .pinia, .vite, .workpress {
    width: 380px;
    height: 200px;
    margin-right: 40px;
    transition: transform 0.3s linear, box-shadow 0.3s linear; /* 添加过渡效果 */
    border-radius: 30px;

}
    .vue:hover, .react:hover, .angular:hover, .pinia:hover, .vite:hover, .workpress:hover {
    border-radius: 50px; /* 添加圆角 */
    transform: translateY(-10px); /* 向上位移10px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    background-color: #ac3743;
}

/* 移除最后一个div的右侧间隙 */
.row div:last-child {
    margin-right: 0;
}

}

</style>
</head>
<body>

<div class="navbar">

    <div class="title">前端交流网</div>

    <div class="navList">
         <a href="#my">我的</a>
          <a href="#login">登录</a>
          <a href="#like">喜欢</a>
          <a href="#travel">旅游</a>
    </div>

</div>

<div class="topbar">
    <h2>前端学无止境</h2>
    <h3>关注web前端开发为主的博客网站和网址导航</h3>
    <h4>收集有一大批前端相关的技术网站，包括Vue、React等技术资料的生态网站，方便快速访问。</h4>
</div>


<div class="content">
    <div class="row">
        <div class="vue" id="vue">
            <div class="icon">
                Vue3
            </div>
            <div>易学易用，性能出色，适用场景丰富的 Web 前端框架</div>
        </div>
        <div class="react" id="react">
            <div class="icon">React</div>
            <div>用于构建 Web 和原生用户界面的库</div>
        </div>
        <div class="angular" id="angular">
            <div class="icon">Angular</div>
            <div>高性能、离线使用、免安装，支持构建原生移动应用和桌面应用。</div>
        </div>
    </div>
    <div class="row">
        <div class="pinia" id="pinia">
         <div class="icon">Pinia</div>
            <div>Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态</div>
        </div>
        <div class="vite" id="vite">
         <div class="icon">Vite</div>
            <div>一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）</div>
        </div>
        <div class="workpress" id="workpress">
         <div class="icon">WorkPress</div>
            <div>适合初学者的无代码环境。 2、易于理解的工具和功能。 3、来自开发人员和用户的令人难以置信的支持结构。 4、易于遵循和学习的简单布局。</div>
        </div>
    </div>

</div>
</body>
</html>

<script>
    // 获取元素
const vue = document.getElementById("vue");
const react = document.getElementById("react");
const angular = document.getElementById("angular");
const pinia = document.getElementById("pinia");
const vite = document.getElementById("vite");
const workpress = document.getElementById("workpress");

// 定义跳转函数
function redirectToWebsite(url) {
  window.location.href = url;
}

// 绑定点击事件
vue.addEventListener("click", () => redirectToWebsite("https://vuejs.org/"));
react.addEventListener("click", () => redirectToWebsite("https://reactjs.org/"));
angular.addEventListener("click", () => redirectToWebsite("https://angular.io/"));
pinia.addEventListener("click", () => redirectToWebsite("https://pinia.vuejs.org/"));
vite.addEventListener("click", () => redirectToWebsite("https://vitejs.dev/"));
workpress.addEventListener("click", () => redirectToWebsite("https://wordpress.org/"));

// 确保元素存在
if (vue && react && angular && pinia && vite && workpress) {
  // 绑定事件
  vue.addEventListener("click", () => redirectToWebsite("https://vuejs.org/"));
  react.addEventListener("click", () => redirectToWebsite("https://reactjs.org/"));
  angular.addEventListener("click", () => redirectToWebsite("https://angular.io/"));
  pinia.addEventListener("click", () => redirectToWebsite("https://pinia.vuejs.org/"));
  vite.addEventListener("click", () => redirectToWebsite("https://vitejs.dev/"));
  workpress.addEventListener("click", () => redirectToWebsite("https://wordpress.org/"));
}




</script>


